<template>
<div class="page">
  <navTop title="详情" />
	<div class="title_h">{{data.title||''}}
		<div class="small flex_ac" v-if="data.title">
			<div class="mr20">{{data.from||''}}</div>  
			<div class="">{{data.create_time.split(' ')[0]||''+' '}}</div>
			<div class="mla flex_ac">
				<img width="12px" height="12px" class="mr4" src="~@/assets/img/project/see.png" alt="">
				<div>{{data.read_num}}</div>
			</div>
		</div>
	</div>
	<div class="page1">
		
		<div class="card1">
		<div class="card_top flex">
			<img class="avatar" v-if="data.avatar" :src="data.avatar" mode="aspectFill"></img>
			<img class="avatar" v-else src="http://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/xs_new_avatar.png" mode=""></img>
			<div class="avatar_name">{{data.nickname||'微信用户'}}</div>
		</div>
		
		<div class="xx_title">
			{{data.name}}
		</div>
			
		<div class="flex">
			<div class="xx_item" v-if="data.invset_type_names">{{data.invset_type_names}}</div>
			<div class="xx_item flex_ac" v-if="data.city_names">
				<img src="" mode="http://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/xs_new_address.png"></img>
				{{data.city_names}}</div>
		</div>
		
		<div class="h15"></div>
	</div>
	
	<div class="card2">
		<div class="card_item flex_sb flex_ac" >
			<div class="i_label">
				投资金额
			</div>
			<div class="i_value" style="color:#3A99F3">{{data.need_money*1||'-'}}亿</div>
		</div>
		<div class="card_item flex_sb">
			<div class="i_label">
				意向区域
			</div>
			<div class="i_value">{{data?.intention_city_names?.split(',').join('')||'不限'}}</div>
		</div>
		<div class="card_item flex_sb flex_ac" >
			<div class="i_label">
				配套需求
			</div>
			<div class="i_value">{{data.need||'-'}}</div>
		</div>
	</div>
	
	<div class="card2">
		<div class="card_item nob">
			<div class="i_label">
				项目介绍
			</div>
		</div>
		<div class="card_item1">
			{{data.desc}}
		</div>
		<div class="h20"></div>
	</div>
	
	<div class="card2" v-if="data.money*1">
		<div class="card_item flex_sb flex_ac">
			<div class="i_label">
				联系人
			</div>
			<div class="i_value">
				{{data.contact || '-'}}
			</div>
		</div>
		<div class="card_item flex_sb flex_ac">
			<div class="i_label">
				联系方式
			</div>
			<div class="i_value">
				{{data.mobile}}
			</div>
		</div>
	</div>
	</div>

	<div class="h50"></div>
	<!-- <bottomDetail :data='data' type="7"></bottomDetail> -->
</div>
</template>

<script>
	import { qijiPro } from '@/api/api.js'
	import navTop from '@/components/navTop.vue'
	import bottomDetail from '@/components/bottomDetail.vue'
	export default {
		data() {
			return {
				data:{id:'',img:'',chain_names:''},
				id:'',
			}
		},
		components:{
      bottomDetail,
      navTop
		},
		created(){
			this.id = this.$route.query.id
			this.getDetail(this.id)
		},
		methods: {
			toCompany(identification){
				if(!identification){
					this.$toast({
						title:'系统暂无该企业的完整信息，请稍后重试'
					})
					return
				}
				this.$router.push({name:'companyDetail',query:{identification}})
			},
			getDetail(id){
				this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
        });
				qijiPro.getDetail({id}).then(res=>{
					this.data = res.data
					this.$toast.clear()
				})
			},
		}
	}
</script>

<style  lang="scss" scoped>
.nav{
	width: 100%;
  height: 40px;
}
.page{
	height: 100%;
  position: relative;
	background-color: #fafafa;
}
.page1{
  margin: 10px;
}
.title_h{
	font-weight: 600;
  font-size: 22px;
  color: #000000;
	margin: 0 14px;
	padding: 10px 0;
	.small{
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		color: #666;
		margin: 20px 0 8px;
    font-weight: 500;
	}
}

.news_ps{
	color:#999;
	font-size:14px;
	margin: 20px 0;
}


.news_title{
	font-size:16px;
	color: #333;
	font-weight:700;
	margin-bottom:10px;
}
.news_company{
	font-size:14px;
	color:#EB7418;
	margin-bottom: 8px;
	text-decoration: underline;
}
.content{

}

.card1{
	position: relative;
	z-index: 11;
	margin: 0 5px;
	background: #FFFFFF;
	border-radius: 6px;
	margin-bottom: 5px;
	.fb_title{
		font-weight: bold;
		font-size: 18px;
		color: #000000;
		margin-bottom: 10px;
	}
	.fb_desc{
		font-size: 14px;
		color: #000000;
	}
	.logo{
		width: 114px;
		height: 53px;
	}
	.line_div{
		margin: 0 5px;
		.line{
			width: 100%;
			height: 10px;
			background: #1167B3;
			border-radius: 5px;
		}
		.line_xx{
			position: relative;
			top:-5px;
			margin: 0 auto;
			width: 315px;
			background: #FFFFFF;
			border-radius: 0px 0px 3px 3px;
			box-shadow: 0px 3px 6px 3px rgba(183,148,118,0.2);
			padding: 0 15px;
			.box{
				width: calc(100% + 30px);
				margin-left: -15px;
				height: 0px;
				box-shadow: 0px 3px 10px 3px #0005;
			}
			.line_x1{
				font-size: 14px;
				color: #000000;
				font-weight: bold;
			}
			.line_x2{
				font-weight: bold;
				font-size: 25px;
				color: #138AF2;
				margin-bottom: 10px;
				text{
					font-weight: 400;
					font-size:13px
				}
			}
			.line_x3{
				font-weight: 400;
				font-size: 12px;
				color: #333333;
			}
		}
	}
}

.card2{
	background: #FFFFFF;
	border-radius: 6px;
	margin:0 5px 5px;
	position: relative;
	// z-index: 11;
	.card_item{
		margin: 0 10px;
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #EEEDE9;
		position: relative;
		&:last-child{
			border-bottom: none;
		}
		.i_label{
			font-weight: 400;
			font-size: 16px;
			color: #000000;
			text{
				color:#FF0000;
				font-size:16px;
			}
		}
		.i_value{
			color:#666;
			font-size: 14px;
			width: 250px;
			text-align: right;
		}
		.i_value1{
			color: #138AF2;
			text-decoration: underline;
		}
	}
	.card_item1{
		margin: 0 10px;
		position: relative;
		font-size: 13px;
		color: #000000;
		line-height: 21px;
	}
	.nob{
		border-bottom: none;
	}
}

.input{
	text-align: right;
	font-size: 14px;
	color: #666;
	margin-left: auto;
}

.comDiv{
	width: 250px;
	position: relative;
	.comList{
		position: absolute;
		z-index: 99;
		width: calc(100% - 10px);
		padding: 0 5px 5px;
		background: #fff;
		border: 1px solid #ccc;
		border-radius: 0 0 3px 3px;
		border-top: none;
		.comItem{
			text-align: right;
			line-height:12px;
			padding: 8px 0;
			font-size: 12px;
			color:#333;
		}
	}
}
.c_bg{
	background: #FAFAFA;
	border-radius: 6px;
}

.ps{
	padding: 5px 15px 10px;
	font-size: 11px;
	color: #999999;
}
.ps_title{
	padding: 17px 10px 10px;
	font-size: 16px;
	color: #EB7418;
}
.ps_text{
	font-size: 11px;
	color: #EB7418;
	line-height: 22px;
	padding: 0 10px;
}

.btn{
	margin: 0 auto;
	line-height: 44px;
	text-align: center;
	width: 345px;
	height: 44px;
	background: linear-gradient(-62deg, #138AF2, #54A3FF);
	border-radius: 22px;
	font-size: 18px;
	color: #FFFFFF;
}

.g_item{
	line-height: 50px;
	img{
		width:14px;
		height:14px;
		margin-right: 6px;
	}
	font-size: 14px;
	color: #138AF2;
}


.card_top{
	position: relative;
	top: -15px;
}
	.avatar{
		width: 50px;
		height: 50px;
		border-radius: 25px;
		margin-left: 10px;
		margin-right: 10px;
	}
	.avatar_name{
		font-size: 14px;
		color: #000000;
		margin-top: 25px;
		width: fit-content;
	}
	.share_btn{
		width: fit-content;
		height: 22px;
		background: linear-gradient(-62deg, #138AF2, #54A3FF);
		border-radius: 3px;
		padding: 0 10px;
		font-size: 12px;
		color: #FFFFFF;
		margin-left: auto;
		margin-right: 10px;
		display: flex;
		align-items: center;
		margin-top: 25px;
		img{
			height: 15px;
			width: 15px;
			margin-right: 8px;
		}
	}
	.xx_title{
		margin-bottom: 10px;
		font-size: 18px;
		color: #000000;
		margin-left: 10px;
	}
.xx_item{
	height: 17px;
	line-height: 17px;
	padding: 0 7px;
	background: rgba(19,138,242,0.1);
	border-radius: 3px;
	
	font-size: 10px;
	color: #138AF2;
	margin-left: 10px;
	img{
		width: 10px !important;
		height: 10px !important;
		margin-right: 3px;
	}
}
</style>
